<!-- 大屏页右上角切换块组件 -->
<template>
	<div class="wh100">
		<el-row v-show="!showObservationArea" class="wh100">
			<el-col :span="12" class="business-top-box">
				<div class="business-box">
					<div class="business-title" style="height: 8%">
						<div class="circle"></div>
						业务告警Top5
					</div>
					<div class="business-top-content">
						<div v-if="businessAlarmList.length <= 0" class="no-data-box">
							<svg-icon class-name="nodata" icon-class="nodata" style="width: 1.2rem"></svg-icon>
							<span style="padding-left: 5px">暂无告警数据~</span>
						</div>
						<div v-for="(item, index) in businessAlarmList" :key="item.businessCode" class="business-alarm-item-bg">
							<div class="business-alarm-item wh100" @click="handleToAlarmBusiness(item, 'true')">
								<img v-if="index == 0" src="../../../../assets/icons/png/ops-workbench/index/px1.png" />
								<img v-if="index == 1" src="../../../../assets/icons/png/ops-workbench/index/px2.png" />
								<img v-if="index == 2" src="../../../../assets/icons/png/ops-workbench/index/px3.png" />
								<img v-if="index == 3" src="../../../../assets/icons/png/ops-workbench/index/px4.png" />
								<img v-if="index == 4" src="../../../../assets/icons/png/ops-workbench/index/px5.png" />
								<div class="busi-name-text" :title="item.businessName + '：' + item.healthRate + '%'">
									{{ item.businessName }}
									<span v-if="index < 3" class="health-rate-text" style="text-decoration: underline">{{ item.healthRate }}%</span>
									<span v-else class="health-rate-text" style="color: #2beded; text-decoration: underline">{{ item.healthRate }}%</span>
								</div>
								<div :class="{ 'agency-gradient-text': index < 3, 'agency-white-text': index >= 3 }">
									{{ item.alarmNum }}<span class="cishu-text">次</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="12" class="business-box">
				<div class="business-title">
					<div class="circle"></div>
					关键业务健康状况
				</div>
				<div v-if="keyBusiHealthList.length <= 0" class="no-data-box health-top5-content">
					<svg-icon class-name="nodata" icon-class="nodata" style="width: 1.2rem"></svg-icon>
					<span style="padding-left: 5px">暂无数据~</span>
				</div>
				<div class="health-top5-content" :class="{ 'd-opacity': keyBusiHealthList.length <= 0 }">
					<div id="businessHealthBar" class="health-top5-bar"></div>
					<div class="health-top5-label" :class="{ 'd-none': dnone }">
						<div
							v-for="(item, index) in keyBusiHealthList"
							:key="item.businessCode"
							class="health-top5-label-item"
							@click="handleToAlarmBusiness(item, 'false')"
						>
							<div class="agency-blue-text">
								<span style="text-decoration: underline">{{ item.healthRate }}%</span>
							</div>
							<div v-if="index < 3" class="overflow-text alarm-num-text" :title="item.alarmNum">
								<span style="text-decoration: underline">{{ item.alarmNum }}</span
								>次
							</div>
							<div v-else class="overflow-text alarm-num-text" :title="item.alarmNum" style="color: white">
								<span style="text-decoration: underline">{{ item.alarmNum }}</span
								>次
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row v-show="showObservationArea" class="wh100 observation-box">
			<div class="obser-list-header">
				<div class="obser-list-title">
					<div class="circle"></div>
					观察区
				</div>
				<div class="obser-list-label">
					<div class="obser-more">
						<el-link :underline="false" @click="handleToAlarmBusiness">更多></el-link>
					</div>
				</div>
			</div>
			<div class="obser-list-body">
				<div v-show="observationList.length <= 0" class="no-data-box">
					<svg-icon class-name="nodata" icon-class="nodata" style="width: 1.2rem"></svg-icon>
					<span style="padding-left: 5px">暂无数据~</span>
				</div>
				<div v-for="(item, index) in observationList" :key="item.businessCode" class="obser-list-item">
					<div class="obser-item wh100" @click="jumpToAlarmAnalysis(item)">
						<img v-if="index == 0" src="../../../../assets/icons/png/ops-workbench/index/px1.png" />
						<img v-if="index == 1" src="../../../../assets/icons/png/ops-workbench/index/px2.png" />
						<img v-if="index == 2" src="../../../../assets/icons/png/ops-workbench/index/px3.png" />
						<img v-if="index == 3" src="../../../../assets/icons/png/ops-workbench/index/px4.png" />
						<img v-if="index == 4" src="../../../../assets/icons/png/ops-workbench/index/px5.png" />
						<div style="flex: 1">
							<el-row style="margin-bottom: 5px">
								<el-col :span="8">{{ item.startTime }}</el-col>
								<el-col :span="8">观察对象：{{ item.observationObjectName }}</el-col>
								<el-col :span="8">观察类型：{{ item.alarmIndicatorCodeName }}</el-col>
							</el-row>
							<el-row>
								<el-col :span="8" :title="item.systemName" class="overflow-text">{{ item.systemName }}</el-col>
								<el-col :span="8" :title="item.businessName" class="overflow-text">{{ item.businessName }}</el-col>
								<el-col :span="8">观察周期：{{ item.cycleCount }}</el-col>
							</el-row>
						</div>
					</div>
				</div>
			</div>
		</el-row>
	</div>
</template>

<script setup name="ObservationArea" lang="ts">
import * as echarts from 'echarts';
import { queryBusiAlarmList, getKeyBusiHealthList, queryObservationArealList } from '@/api/ops-workbench/index';
import { chartResize } from '@/utils/ops-workbench/chartCommon';
import { onUpdated, ref } from 'vue';
import { useRouter } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';

const props = defineProps({
	showObservationArea: {
		type: Boolean,
		default: false,
	},
	queryParams: {
		type: Object,
		default: () => {},
	},
});

onUpdated(() => {
	handleChartResize();
});

const router = useRouter();
const { proxy } = useCurrentInstance();

// 业务告警Top5列表数据
const businessAlarmList = ref<Array<any>>([]);
// 关键业务健康状况列表数据
const keyBusiHealthList = ref<Array<any>>([]);
// 观察区列表数据
const observationList = ref<Array<any>>([]);
let chart: anyObj = {};
const dnone = ref(false);

/* 图形相关 */
function initChart() {
	chart.businessHealthBar = echarts.init(document.getElementById('businessHealthBar')!);
}
function clearChart() {
	chart.businessHealthBar.clear();
}
function handleChartResize() {
	chartResize(chart);
}

// 获取业务告警Top5列表数据
function getBusiAlarmList() {
	queryBusiAlarmList(props.queryParams).then((res: ApiResponse) => {
		console.log(props.queryParams, 'props.queryParams');
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		businessAlarmList.value = res.data;
	});
}
// 渲染关键业务健康状况柱图
function renderBusinessHealthTopN() {
	const businessNameArr: any[] = [],
		healthRateArr: any[] = [];
	getKeyBusiHealthList(props.queryParams).then((res: ApiResponse) => {
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		const resData = res.data;
		keyBusiHealthList.value = res.data;
		if (!resData || resData.length <= 0 || !resData[0].systemId) {
			dnone.value = true;
			chart.businessHealthBar.clear();
			return;
		}
		// 有数据
		dnone.value = false;
		const maxArr: any[] = [];
		resData.forEach((r: anyObj) => {
			businessNameArr.push(r.businessName);
			healthRateArr.push(String(r.healthRate) === '100' ? Number(r.healthRate) : r.healthRate);
			maxArr.push(100);
		});
		// 升序翻转
		businessNameArr.reverse();
		healthRateArr.reverse();
		// 设置高度
		let chartHeight = 100;
		if (businessNameArr.length > 0) {
			chartHeight = businessNameArr.length * 20;
		}
		const healthTopBar = document.getElementsByClassName('health-top5-bar')[0] as HTMLElement;
		healthTopBar.style.height = chartHeight + '%';
		chart.businessHealthBar.resize();
		// 渲染图表
		chart.businessHealthBar.setOption({
			grid: {
				left: 6,
				top: 6,
				right: 12,
				bottom: 6,
			},
			xAxis: {
				max: 100,
				show: false,
			},
			yAxis: {
				type: 'category',
				inverse: false,
				data: businessNameArr,
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					show: false,
					inside: false,
				},
			},
			series: [
				{
					// 内
					name: 'healthRate',
					type: 'bar',
					barWidth: 18,
					itemStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 1,
							y2: 0,
							colorStops: [
								{
									offset: 0,
									color: '#008edb', // 0% 处的颜色
								},
								{
									offset: 1,
									color: '#00dbeb', // 100% 处的颜色
								},
							],
						},
					},
					// 文字标签
					label: {
						show: true,
						position: [0, -18],
						formatter: '{b}',
						color: '#ffffff',
						fontSize: 14,
					},
					data: healthRateArr,
					z: 2,
				},
				{
					// 背景
					name: 'maxRate',
					type: 'bar',
					barGap: '-100%',
					barWidth: 18,
					itemStyle: {
						color: 'rgba(255, 255, 255, 0.2)',
					},
					data: maxArr,
					z: 1,
				},
			],
		});
		chart.businessHealthBar.on('click', (params: anyObj) => {
			handleToAlarmBusiness(resData[resData.length - 1 - params.dataIndex], 'false');
		});
	});
}
// 获取观察区列表数据
function getObservationList() {
	queryObservationArealList(props.queryParams).then((res: ApiResponse) => {
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		observationList.value = res.data.data;
	});
}
// 观察区各项下钻--业务告警事件归档分析页面
function jumpToAlarmAnalysis(item: anyObj) {
	let titleTxt = '';
	switch (item.alarmIndicatorCode) {
		case 'BS_FAIL_RATE_20':
			titleTxt = item.systemName + '-' + item.businessName + '-响应慢业务告警分析';
			break;
		case 'BS_FAIL_RATE_10':
			titleTxt = item.systemName + '-' + item.businessName + '-失败业务告警分析';
			break;
		case 'BS_FAIL_RATE_30':
			titleTxt = item.systemName + '-' + item.businessName + '-健康度低业务告警分析';
			break;
	}
	router.push({
		path: '/ops-workbench/business-alarm-analysis/index',
		query: {
			titleName: titleTxt,
			trendId: item.flag,
			areaId: item.flag,
			...item,
		},
	});
}
// 两柱图各项、观察区--更多下钻至告警业务事件档案
function handleToAlarmBusiness(item?: anyObj, flag?: string) {
	if (flag) {
		router.push({
			path: '/ops-workbench/alarm-business-event/index',
			query: {
				systemId: props.queryParams.systemId,
				businessCodeList: item ? item.businessCode : '',
				startTime: props.queryParams.startTime,
				endTime: props.queryParams.endTime,
				notKeyBusi: flag ? flag : '',
			},
		});
	} else {
		router.push({
			path: '/ops-workbench/alarm-service-svent-files/index',
			query: {
				systemId: props.queryParams.systemId,
				businessCodeList: item ? item.businessCode : '',
				// startTime: props.queryParams.startTime,
				// endTime: props.queryParams.endTime,
				// notKeyBusi: flag ? flag : '',
			},
		});
	}
}

defineExpose({
	dnone,
	initChart,
	handleChartResize,
	getBusiAlarmList,
	getObservationList,
	clearChart,
	renderBusinessHealthTopN,
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$box-background: #2a507d;
$text-red: #ef4b43;
$text-yellow: #faff67;
$text-blue: #2beded;
$size-14: 14px;
$size-16: 16px;
$size-20: 20px;
.wh100 {
	width: 100%;
	height: 100%;
}
.d-none {
	display: none;
}
.d-opacity {
	opacity: 0;
}
.no-data-box {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff70;
	font-size: $size-14;
}
.overflow-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.agency-gradient-text {
	flex: 1;
	text-align: right;
	padding-right: 10px;
	color: $text-yellow;
	font-size: 18px;
	font-family: Agency;
	background-image: -moz-linear-gradient(white 45%, $text-yellow);
	background-image: -o-linear-gradient(white 45%, $text-yellow);
	background-image: -webkit-linear-gradient(white 45%, $text-yellow);
	-webkit-text-fill-color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	.cishu-text {
		color: $text-yellow;
		font-size: 14px;
	}
}
.agency-white-text {
	flex: 1;
	text-align: right;
	padding-right: 10px;
	color: white;
	font-size: 18px;
	font-family: Agency;
	.cishu-text {
		color: white;
		font-size: 14px;
	}
}
.business-top-box {
	height: 100%;
	padding-right: 8px;
	.business-top-content {
		height: 90%;
		width: 100%;
		.business-alarm-item-bg {
			height: 20%;
			background-image: url('../../../../assets/icons/png/ops-workbench/index/blue-bottom.png');
			background-repeat: no-repeat;
			background-position: bottom;
			background-size: 100% 50%;
			padding-bottom: 8px;
			background-origin: content-box;
			.business-alarm-item {
				cursor: pointer;
				display: flex;
				align-items: center;
				.busi-name-text {
					width: 65%;
					font-size: 15px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.health-rate-text {
					color: $text-yellow;
					width: 42px;
				}
			}
		}
	}
}
.business-box {
	height: 100%;
	background: $box-background;
	border-radius: 8px;
	padding: 10px 10px 0;
	.business-title {
		font-size: $size-16;
		height: 10%;
		position: relative;
		.business-more-link {
			position: absolute;
			bottom: 45%;
			right: 1%;
		}
	}
	.health-top5-content {
		width: 100%;
		height: 90%;
		display: flex;
		.health-top5-bar {
			height: 100%;
			width: 65%;
		}
		.health-top5-label {
			width: 35%;
			height: 100%;
			padding: 6px 0;
			.health-top5-label-item {
				width: 100%;
				height: 20%;
				display: flex;
				cursor: pointer;
				padding-top: 16%;
				.agency-blue-text {
					display: inline-block;
					width: 45%;
					min-width: 49px;
					color: $text-blue;
					font-size: 18px;
					font-family: Agency;
				}
				.alarm-num-text {
					width: 55%;
					padding-left: 5px;
					display: inline-block;
					color: $text-yellow;
					font-size: $size-14;
				}
			}
		}
	}
}
.observation-box {
	padding: 10px 10px 5px;
	background: $box-background;
	border-radius: 8px;
	.obser-list-header {
		height: 8%;
		width: 100%;
		padding-right: 6px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.obser-list-title {
			font-size: $size-16;
		}
		.obser-list-label {
			margin-right: 8px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.obser-type-tip {
				color: $text-red;
				font-size: $size-14;
				margin-right: 24px;
			}
			.obser-more {
				padding-bottom: 2px;
			}
		}
	}
	.obser-list-body {
		height: 90%;
		width: 100%;
		padding-top: 6px;
		padding-left: 5px;
		.obser-list-item {
			height: 20%;
			background-image: url('../../../../assets/icons/png/ops-workbench/index/blue-bottom-large.png');
			background-repeat: no-repeat;
			background-position: bottom;
			background-size: 100% 50%;
			padding-bottom: 8px;
			background-origin: content-box;
			.obser-item {
				cursor: pointer;
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
